<!--
 * @Descripttion: 附件信息
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-20 15:53:49
 * @LastEditTime: 2022-09-23 17:14:05
-->
<template>
  <div class="enclosure-msg">
    <Button type="primary" class="fr" v-if="showDownLoad"
      @click="downLoadSingleFile">下载附件</Button>
    <div v-for="(item,index) in enclosureImg" :key="index" class="flex enclosure-item">
      <p class="enclosure-title text-right">{{enclosureList[item.attachType]}}：</p>
      <div class="flex flex-wrap flex-1">
        <div v-if="JSON.parse(item.attachAddress)">
          <enclosure-img :showDelete="item.showDelete" :images="JSON.parse(item.attachAddress)"
            @onHandleRemove="handleRemove" :attachId="item.attachId" :type="item.attachType"
            v-if="JSON.parse(item.attachAddress).length">
          </enclosure-img>
          <div v-else-if="item.backupDate"
            class="no-img text-center flex flex-vertical-center flex-wrap">
            <p>待补</p>
            <p>{{item.backupDate}}</p>
          </div>
        </div>
        <upload-enclosure v-if="item.uploadFlag" :images="JSON.parse(item.attachAddress)"
          :attachId="item.attachId" :type="item.attachType" :disabledFlag="disabledFlag"
          @onHandleSuccess="handleSuccess">
        </upload-enclosure>
      </div>

    </div>
  </div>
</template>
<script>
  import enclosureImg from '@/components/enclosureImg.vue'
  import uploadEnclosure from './uploadEnclosure.vue'
  import subMgr from '@/biz/sales/subOrder'
  import contractMgr from '@/biz/sales/contractOrder.js'
  import comMgr from '@/biz/sales/salesCommon'
  export default {
    components: { enclosureImg, uploadEnclosure },
    props: ['contractId', 'orderStatusName', 'detailMsg', 'code'],
    data() {
      return {
        showDelete: false, // 是否展示删除按钮
        disabledFlag: false, // 上传成功之前禁用其他上传框
        showDownLoad: false,
        // 签约回款中、签约已全款、签约已交房 认购未签约、认购已签约  可编辑
        enclosureImg: [],
        enclosureList: {
          channelImages: '渠道带看单',
          networkCredentialsImages: '网络获客凭证',
          subscriptionImages: '认购单',
          subscriptionCreditImages: '认购收据及POS单',
          contractAffirmNetworkImages: '合同关键页&签约确认单（网签）',
          contractAffirmInitialImages: '合同关键页&签约确认单（草签）',
          billOfCreditImages: '签约收据及POS单',
          satisfactionSurveyImages: '客户满意度调查表',
          specialApplicationImages: '特殊申请',
        },
      }
    },
    mounted() {
      if (this.orderStatusName == '认购') {
        this.getEnclosureFile(1)
        this.showDownLoad = this.unlocking('0104010308')
      } else {
        this.getEnclosureFile(2)
        this.showDownLoad = this.unlocking('0104030312')
      }
    },
    methods: {
      downLoadSingleFile() {
        if (this.orderStatusName == '认购') {
          let params = {
            orderCodeList: [this.code],
            housesId: JSON.parse(this.$tool.getStorage('buildMess')).housesId,
          }

          subMgr
            .exportAttach(params)
            .then((res) => {})
            .catch((err) => {})
        } else {
          let params = {
            orderCodeList: [this.code],
            housesId: JSON.parse(this.$tool.getStorage('buildMess')).housesId,
          }

          contractMgr
            .exportAttach(params)
            .then((res) => {})
            .catch((err) => {})
        }
      },
      // 获取附件列表 1认购 2签约
      getEnclosureFile(type) {
        let params = {
          id: this.contractId,
          type: type,
        }
        comMgr
          .getAnnexList(params)
          .then((res) => {
            if (res) {
              this.enclosureImg = res
              this.enclosureImg.forEach((item) => {
                item.attachAddress =
                  item.attachAddress == '' ? null : item.attachAddress

                item.uploadFlag = this.editFlagFun(item)
              })
            } else {
              this.enclosureImg = []
            }
          })
          .catch((res) => {
            this.enclosureImg = []
          })
      },
      editFlagFun(item) {
        let uploadFlag = false
        let imgLen = !JSON.parse(item.attachAddress) ?
          0 :
          JSON.parse(item.attachAddress).length
        if (this.orderStatusName == '认购') {
          let statusFlag = ['认购未签约', '认购已签约'].indexOf(
            this.detailMsg.orContractBaseInfoVO.statusName
          ) > -1
          uploadFlag = statusFlag && this.unlocking('0104010309')

          item.showDelete =
            this.unlocking('0104010310') && imgLen > 1 && statusFlag
        } else if (this.orderStatusName == '签约') {
          let statusFlag = ['签约回款中', '签约已全款', '签约已交房'].indexOf(
            this.detailMsg.orContractBaseInfoVO.statusName
          ) > -1
          uploadFlag = statusFlag && this.unlocking('0104030313')

          item.showDelete =
            this.unlocking('0104030315') && imgLen > 1 && statusFlag
        }

        return imgLen < 30 && uploadFlag
      },
      // 移除图片
      handleRemove(index, type, attachId) {
        // 附件列表的删除要调接口
        this.$Modal.confirm({
          title: `确定删除此附件？`,
          content: '',
          onOk: () => {
            let curTypeImg = JSON.parse(
              this.enclosureImg.filter((item) => item.attachType == type)[0]
              .attachAddress
            )
            let delAddress = curTypeImg.splice(index, 1)
            let params = {
              attachAddress: JSON.stringify(curTypeImg),
              addAddress: '[]',
              delAddress: JSON.stringify(delAddress),
              attachId: attachId == '-' ? null : attachId,
              attachType: type,
              backupDate: null,
              backupStatus: 2,
            }
            this.updateImgFun([params])
          },
          onCancel: () => {
            this.$Message.info('您取消了操作。')
          },
        })
      },
      // 上传成功
      handleSuccess(file, type, attachId) {
        this.disabledFlag = true
        // 调用图片上传数据库接口
        let fileList = []
        file.forEach((item) => {
          let obj = {
            url: item.url,
            date: this.$tool.formatDate(new Date()),
          }
          fileList.push(obj)
        })
        let attachAddress = JSON.parse(
            this.enclosureImg.filter((item) => item.attachType == type)[0]
            .attachAddress
          ) ?
          JSON.parse(
            this.enclosureImg.filter((item) => item.attachType == type)[0]
            .attachAddress
          ).concat(fileList) :
          fileList
        let params = {
          attachAddress: JSON.stringify(attachAddress),
          addAddress: JSON.stringify(fileList),
          delAddress: '[]',
          attachId: attachId == '-' ? null : attachId,
          attachType: type,
          backupDate: null,
          backupStatus: 2,
        }
        this.updateImgFun([params])
      },
      // 更新附件图片
      updateImgFun(params) {
        comMgr
          .updateOrAnnex({
            businessId: this.code,
            orAnnexReqs: params,
          })
          .then((res) => {
            if (this.orderStatusName == '认购') {
              this.getEnclosureFile(1)
            } else {
              this.getEnclosureFile(2)
            }
            this.$Message.success('操作成功。')
            this.disabledFlag = false
          })
          .catch((res) => {
            this.disabledFlag = false
            this.$Message.error(res)
          })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .enclosure-msg {
    padding: 50px 0px;
    max-height: 650px;
    overflow-y: auto;

    ::v-deep .ivu-btn-primary {
      margin-right: 50px;
    }

    .enclosure-item {
      margin-top: 20px;

      .enclosure-title {
        font-size: 20px;
        width: 350px;
      }

      .no-img {
        color: #d9001b;
        height: 100px;
        width: 100px;
        height: 100px;
        margin: 10px 20px 0 0;
        border: 1px solid #666;

        p {
          width: 100%;
        }
      }
    }
  }
</style>